<template>
  <div>
    <el-form label-width="80px" label-position="right" class="method-info">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="请求名称">
            <el-input v-model="request.requestName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="调用指令">
            <el-input v-model="request.callCmd"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="请求类型">
            <el-select v-model="request.requestType" placeholder="请求类型" style="width: 100%" clearable>
              <el-option v-for="item in requestTypes" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="返回类型">
            <el-select v-model="request.resultType" placeholder="返回类型" style="width: 100%" clearable>
              <el-option v-for="item in resultTypes" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="请求地址">
            <el-input v-model="request.requestUrl"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="内容类型">
            <el-select v-model="request.contentType" placeholder="请求体类型" style="width: 100%" clearable>
              <el-option v-for="item in contentTypes" :key="item.value" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-form-item label-width="0" style="text-align: center">
        <el-button type="primary" :loading="loading" icon="el-icon-check" @click="saveRequest">{{ request.requestId ? '更新' : '保存' }}</el-button>
        <el-button v-if="request.requestId" type="success" :loading="loading" icon="el-icon-video-play" @click="testRequest">测试</el-button>
      </el-form-item>-->
    </el-form>
    <el-tabs>
      <el-tab-pane v-if="request.requestId" label="参数信息">
        <request-param :request-id="request.requestId" />
      </el-tab-pane>
      <el-tab-pane label="测试用例" lazy>
        <request-case :request="request" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RequestParam from "@/views/system/request/RequestParam";
import RequestCase from "@/views/system/request/RequestCase";
export default {
  name: "RequestInfo",
  components: {RequestCase, RequestParam},
  props: {
    request: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      requestTypes: [
        { value: 'get', label: 'GET' },
        { value: 'post', label: 'POST' },
        { value: 'put', label: 'PUT' },
        { value: 'delete', label: 'DELETE' },
      ],
      resultTypes: [
        { value: 'String', label: '字符串' },
        { value: 'json', label: 'JSON' },
        { value: 'byte', label: '字节数组' },
      ],
      contentTypes: [
        { value: 'application/json; charset=utf-8', label: '对象(JSON)' },
        { value: 'application/x-www-form-urlencoded', label: '表单(FORM)' },
        { value: 'multipart/form-data', label: '文件' },
      ]
    }
  }
}
</script>

<style scoped>

</style>
